<!--
 * @Version: 1.0
 * @Date: 2021-06-28 14:56:46
 * @LastEditTime: 2022-01-27 12:24:18
 * @Description:
-->
<template>
  <div>
    <el-dialog
      :center="true"
      :title="title"
      :visible.sync="formVisibleDeliver"
      width="700px"
      :before-close="() => {$emit('update:formVisibleDeliver', false),
                            $refs['ruleForm'].resetFields()}"
      @open="openDialog"
    >
      <div
        v-loading="loading"
        class="from_box"
      >
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="请选择发货方式"
            prop="type"
          >
            <el-radio-group v-model="ruleForm.type">
              <el-radio
                :disabled="type==='3'?true:false"
                label="1"
              >自有仓库</el-radio>
              <el-radio
                :disabled="type==='3'?true:false"
                label="2"
              >第三方仓库</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.type==='2'"
            label="选择第三方仓库"
            prop="warehouse"
          >
            <el-select
              v-model="ruleForm.warehouse"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in warehouseStockListOther"
                :key="item.id"
                :disabled="item.product_number<1?true:false"
                :label="`${item.name}(${item.product_number})`"
                :value="item.dataObj"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.type==='1'"
            label="选择自有仓库"
            prop="warehouse"
          >
            <el-select
              v-model="ruleForm.warehouse"
              placeholder="请选择"
              filterable
            >
              <!-- <el-option
                v-for="item in warehouseStockList"
                :key="item.id"
                :disabled="item.product_number<1?true:false"
                :label="`${item.warehouse_fictitious_name}/(${item.product_number})/(${item.zone})`"
                :value="item.dataObj"
              /> -->
              <el-option-group
                v-for="group in warehouseStockList"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.id"
                  :disabled="item.product_number<1?true:false"
                  :label="`${item.warehouse_fictitious_name}/(${item.product_number})/(${item.zone})/(${ item.isShopWarehouse ? 'YES': 'NO'})`"
                  :value="item.dataObj"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <div>
            <div style="text-align: center;margin:40px 0 20px;">
              <el-button
                type="primary"
                :loading="isbtn"
                @click="submitForm('ruleForm')"
              >保存</el-button>
              <el-button @click="handleCancelDown">取消</el-button>
            </div>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getWarehouseThrid } from '@/utils/publicData'
import { warehouseStockList, warehouseStockListOther } from '@/utils/publicData'
export default {
  props: {
    formVisibleDeliver: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    ids: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      loading: false,
      isbtn: false,
      ruleForm: {
        type: '1',
        warehouse: ''
      },
      warehouseData: [],
      rules: {
        type: [
          { required: true, message: '请选择发货类型', trigger: 'blur' }
        ],
        warehouse: [
          { required: true, message: '请选择第三方仓库', trigger: 'blur' }
        ]
      },
      warehouseStockListOther: [],
      warehouseStockList: []
    }
  },
  //   mounted() {
  //     getWarehouseThrid().then((res) => {
  //       console.log('warehouseData', res)
  //       this.warehouseData = res
  //     })
  //   },
  methods: {
    openDialog() {
      this.loading = true
      warehouseStockList(this.ids).then((data) => {
        this.warehouseStockList = data.map((item) => {
          item['options'] = item['options'].map((arr) => {
            arr.dataObj = JSON.stringify({
              'warehouse_id': arr.warehouse_id,
              'warehouse_fictitious_id': arr.warehouse_fictitious_id,
              'zone': arr.zone
            })
            return arr
          })
          return item
        })
        this.loading = false
      })
      warehouseStockListOther(this.ids).then((data) => {
        const dataObj = data.filter((arr) => {
          return arr.is_active === 1
        })
        this.warehouseStockListOther = dataObj.map((arr) => {
          arr.dataObj = JSON.stringify({
            'warehouse_id': arr.entity_warehouse_id,
            'warehouse_fictitious_id': arr.virtual_warehouse_id,
            'zone': 0
          })
          return arr
        })
      })
    },
    handleCancelDown() {
      this.$emit('update:formVisibleDeliver', false)
      this.$refs['ruleForm'].resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isbtn = true
          const data = JSON.parse(this.ruleForm.warehouse)
          data.type = this.ruleForm.type
          this.$http.post(`/deliveryOrders/manualDelivery/${this.ids}`, data).then(response => {
            if (response.code === 10000) {
              this.$message.success('发货成功')
              this.$emit('handleSearch')
              this.handleCancelDown()
              this.isbtn = false
            }
          }).catch(() => {
            this.isbtn = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
